<template>
  <a-card :bordered="false" style="width: 100%;border-radius: 4px">
    <a-steps :current="stepCurrent" size="small">
      <a-step title="类目选择"/>
      <a-step title="基本信息"/>
      <a-step title="商品属性"/>
      <a-step title="商品详细"/>
      <a-step title="价格库存"/>
      <a-step title="物流信息"/>
    </a-steps>

    <div style="width: 100%;padding: 16px;text-align: center">

      <a-form :model="form" :label-col="{span: 12,style:{marginLeft:'200px'}}" :wrapper-col="{span: 12,style:{textAlign:'left'}}">
        <div v-show="stepCurrent == 0">
          <a-form-item label="商品类目：">
            <Cascader
              :value="form.prdClassArray"
              :options="options"
              :field-names="{label:'name',value:'name',children: 'children'}"
              @change="prdClassChange"
              placeholder="请选择商品类目"
              :style="{width:'400px',borderRadius:'4px'}"/>
          </a-form-item>
        </div>

        <div v-show="stepCurrent == 1">
          <a-form-item label="商品名称：">
            <a-input
              v-model="form.prdName"
              placeholder="请输入商品名称"
              :style="{width:'400px',borderRadius:'4px'}"/>
          </a-form-item>
          <a-form-item label="商品子标题：">
            <a-input
              v-model="form.prdSubName"
              placeholder="商品子标题"
              :style="{width:'400px',borderRadius:'4px'}"/>
          </a-form-item>
          <a-form-item label="商品封面：">
            <a-upload
              :action="url + `/file/`"
              list-type="picture-card"
              :file-list="prdImgCoverFileList"
              @change="prdImgCoverChange">
              <div v-show="prdImgCoverFileList.length == 0">
                <div class="ant-upload-text">上传图片</div>
              </div>
            </a-upload>
          </a-form-item>
        </div>

        <div v-show="stepCurrent == 2">
          <a-form-item label="商品类型">
            <a-select v-model="form.prdType" placeholder="`请选择商品类型`" :style="{width:'400px',borderRadius:'4px'}">
              <a-select-option value="01">
                普通商品
              </a-select-option>
              <a-select-option value="02">
                代销商品
              </a-select-option>
              <a-select-option value="03">
                虚拟商品
              </a-select-option>
              <a-select-option value="04">
                闪购商品
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="`是否预售`">
            <a-select v-model="form.isPresell" placeholder="请选择是否预售" :style="{width:'400px',borderRadius:'4px'}">
              <a-select-option value="01">
                非预售
              </a-select-option>
              <a-select-option value="02">
                预售
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="`频道展示`">
            <a-select v-model="form.isChannelShow" placeholder="请选择频道展示" :style="{width:'400px',borderRadius:'4px'}">
              <a-select-option value="01">
                是
              </a-select-option>
              <a-select-option value="02">
                否
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <div v-show="stepCurrent == 3">
          <a-form-item label="商品描述：">
            <a-textarea
              v-model="form.prdDesc"
              placeholder="请输入商品描述"
              :style="{width:'400px',height:'150px',borderRadius:'4px'}"/>
          </a-form-item>
          <a-form-item label="商品详细图：">
            <a-upload
              :action="url + `/file/`"
              list-type="picture-card"
              :file-list="prdImgFileList"
              @change="prdImgChange">
              <div v-if="prdImgFileList.length <= 10">
                <div class="ant-upload-text">上传图片</div>
              </div>
            </a-upload>
          </a-form-item>
        </div>

        <div v-show="stepCurrent == 4">
          <a-form-item label="商品规格">
            <div>
              <a-button type="primary" @click="addPropModalShow = true" :disabled="form.propList.length >= 2">新增规格
              </a-button>
            </div>
            <a-modal v-model="addPropModalShow" title="新增规格" :footer="null">
              <a-input v-model="propName" placeholder="规格名称" style="width: 300px" required/>&nbsp;<a-button
                type="primary"
                @click="addProp">确认新增
              </a-button>
            </a-modal>
            <a-card style="width: 500px;margin-top: 5px" v-for="(item, index) in form.propList" :key="index">
              <div slot="title">{{ item.propName }}</div>
              <a-button slot="extra" type="danger" @click="delProp(index)">移除规格</a-button>
              <div>
                <a-checkbox v-for="(specItem,specIndex) in item.specList" :key="specIndex" checked="true">
                  <a-tag>{{ specItem }} <a
                    @click="delSpec(index,specIndex)"
                    style="margin-left:5px;border-left: 1px #dddddd solid">x</a></a-tag>
                </a-checkbox>
              </div>
              <a-row :gutter="20" style="margin-top: 16px">
                <a-col :span="10">
                  <a-input placeholder="规格值名称" v-model="item.specName"/>
                </a-col>
                <a-col :span="1">
                  <a-button type="primary" @click="addSpec(index)">新增规格值</a-button>
                </a-col>
              </a-row>
            </a-card>
          </a-form-item>
          <a-form-item label="价格与库存">
            <a-row style="background-color: #dddddd" :gutter="10">
              <a-col :span="4" style="text-align: center" v-if="form.propList.length === 0">规格</a-col>
              <a-col
                :span="4"
                style="text-align: center"
                v-for="(item,index) in form.propList"
                v-if="item.specList.length > 0"
                :key="index">
                {{ item.propName }}
              </a-col>
              <a-col :span="4" style="text-align: center">*库存</a-col>
              <a-col :span="4" style="text-align: center">*单价</a-col>
              <a-col :span="4" style="text-align: center">sku编码</a-col>
            </a-row>
            <a-row :gutter="10" v-if="form.propList.length===0">
              <a-col :span="4" style="text-align: center">规格</a-col>
              <a-col :span="4" style="text-align: center">
                <a-input placeholder="库存"/>
              </a-col>
              <a-col :span="4" style="text-align: center">
                <a-input placeholder="单价"/>
              </a-col>
              <a-col :span="4" style="text-align: center">
                <a-input placeholder="sku"/>
              </a-col>
            </a-row>
            <a-row :gutter="10" v-if="form.propList.length>0" v-for="(item,index) in form.skuList" :key="index">
              <a-col :span="4" style="text-align: center" v-if="item.specOneName">{{ item.specOneName }}</a-col>
              <a-col :span="4" style="text-align: center" v-if="item.specTwoName">{{ item.specTwoName }}</a-col>
              <a-col :span="4" style="text-align: center">
                <a-input placeholder="库存" v-model="item.stock"/>
              </a-col>
              <a-col :span="4" style="text-align: center">
                <a-input placeholder="单价" v-model="item.price"/>
              </a-col>
              <a-col :span="4" style="text-align: center">
                <a-input placeholder="sku" v-model="item.sku"/>
              </a-col>
            </a-row>
          </a-form-item>

          <!--          <a-form-item label="商品售价：">-->
          <!--            <a-input-number-->
          <!--              v-model="form.prdPrice"-->
          <!--              :min="0"-->
          <!--              :max="99999999"-->
          <!--              :step="0.01"-->
          <!--              :precision="2"-->
          <!--              placeholder="请输入商品售价"-->
          <!--              :style="{width:'400px',borderRadius:'4px'}"-->
          <!--              :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"-->
          <!--              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"-->
          <!--            />-->
          <!--          </a-form-item>-->
          <!--          <a-form-item label="商品库存：">-->
          <!--            <a-input-number-->
          <!--              v-model="form.prdCount"-->
          <!--              :min="0"-->
          <!--              :max="99999999"-->
          <!--              :step="1"-->
          <!--              :precision="0"-->
          <!--              placeholder="请输入商品库存"-->
          <!--              :style="{width:'400px',borderRadius:'4px'}"-->
          <!--            />-->
          <!--          </a-form-item>-->
        </div>

        <div v-show="stepCurrent == 5">
          <a-form-item label="物流模板：">
            <a-select v-model="form.expressTemplate" placeholder="请选择物流模板" :style="{width:'400px',borderRadius:'4px'}">
              <a-select-option value="1">
                全国包邮
              </a-select-option>
              <a-select-option value="2">
                货到付款
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <a-button
          v-if="stepCurrent > 0"
          type="primary"
          :style="{marginTop:'16px'}"
          @click="stepCurrent == 0 ? stepCurrent : stepCurrent--">上一步
        </a-button>

        <a-button
          v-if="stepCurrent < 5"
          :style="{marginTop:'16px',marginLeft:'8px'}"
          @click="stepCurrent++">下一步
        </a-button>

        <a-button
          v-if="stepCurrent == 5"
          :style="{marginTop:'16px',marginLeft:'8px'}"
          @click="handleSubmit">提 交
        </a-button>
      </a-form>
    </div>
  </a-card>
</template>

<script>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { Cascader } from 'ant-design-vue'
  import { addPrd } from '@/api/prd'
  import notification from 'ant-design-vue/es/notification'

  const options = [{
    'id': 1,
    'parentId': null,
    'name': '服装',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 7,
      'parentId': null,
      'name': '外套',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 8,
      'parentId': null,
      'name': 'T恤',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 9,
      'parentId': null,
      'name': '休闲裤',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 10,
      'parentId': null,
      'name': '牛仔裤',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 11,
      'parentId': null,
      'name': '衬衫',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 29,
      'parentId': null,
      'name': '男鞋',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 53,
      'parentId': null,
      'name': '服装属性',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 2,
    'parentId': null,
    'name': '手机数码',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 19,
      'parentId': null,
      'name': '手机通讯',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 30,
      'parentId': null,
      'name': '手机配件',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 31,
      'parentId': null,
      'name': '摄影摄像',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 32,
      'parentId': null,
      'name': '影音娱乐',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 33,
      'parentId': null,
      'name': '数码配件',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 34,
      'parentId': null,
      'name': '智能设备',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 3,
    'parentId': null,
    'name': '家用电器',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 35,
      'parentId': null,
      'name': '电视',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 36,
      'parentId': null,
      'name': '空调',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 37,
      'parentId': null,
      'name': '洗衣机',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 38,
      'parentId': null,
      'name': '冰箱',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 39,
      'parentId': null,
      'name': '厨卫大电',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 40,
      'parentId': null,
      'name': '厨房小电',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 41,
      'parentId': null,
      'name': '生活电器',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 42,
      'parentId': null,
      'name': '个护健康',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 4,
    'parentId': null,
    'name': '家具家装',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 43,
      'parentId': null,
      'name': '厨房卫浴',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 44,
      'parentId': null,
      'name': '灯饰照明',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 45,
      'parentId': null,
      'name': '五金工具',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 46,
      'parentId': null,
      'name': '卧室家具',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 47,
      'parentId': null,
      'name': '客厅家具',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 5,
    'parentId': null,
    'name': '汽车用品',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 48,
      'parentId': null,
      'name': '全新整车',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 49,
      'parentId': null,
      'name': '车载电器',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 50,
      'parentId': null,
      'name': '维修保养',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 51,
      'parentId': null,
      'name': '汽车装饰',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }]
  export default {
    // 创建商品
    name: 'CreateProduct',
    components: { Cascader, PlusOutlined },
    data () {
      return {
        url: process.env.VUE_APP_API_BASE_URL,
        stepCurrent: 0,
        options,
        prdImgCoverFileList: [],
        prdImgFileList: [],
        addPropModalShow: false,
        propName: '',
        form: {
          prdClass: '',
          prdClassArray: [],
          prdName: '',
          prdSubName: '',
          prdType: '01',
          isPresell: '01',
          isChannelShow: '01',
          prdDesc: '',
          prdPrice: '0',
          prdCount: 0,
          expressTemplate: '1',
          prdImgCover: '',
          prdImg01: '',
          prdImg02: '',
          prdImg03: '',
          prdImg04: '',
          prdImg05: '',
          prdImg06: '',
          prdImg07: '',
          prdImg08: '',
          prdImg09: '',
          prdImg10: '',
          propList: [],
          skuList: []
        }
      }
    },
    methods: {
      addProp () {
        if (this.propName) {
          this.form.propList.splice(0, 0, { 'propName': this.propName, 'specName': '', 'specList': [] })
          this.propName = ''
          this.addPropModalShow = false
        }
      },
      delProp (index) {
        this.form.propList.splice(index, 1)
      },
      delSpec (index, specIndex) {
        this.form.propList[index]['specList'].splice(specIndex, 1)
      },
      addSpec (index) {
        if (this.form.propList[index].specName) {
          this.form.propList[index]['specList'].splice(0, 0, this.form.propList[index].specName)
          this.form.propList[index].specName = ''

          this.form.skuList = []

          const specOneList = this.form.propList.length > 0 ? this.form.propList[0]['specList'] : []
          const specTwoList = this.form.propList.length > 1 ? this.form.propList[1]['specList'] : []

          specOneList.forEach(specOneName => {
            if (specTwoList.length > 0) {
              specTwoList.forEach(specTwoName => {
                this.form.skuList.splice(0, 0, {
                  'specOneName': specOneName,
                  'specTwoName': specTwoName,
                  'stock': '',
                  'price': '',
                  'sku': ''
                })
              })
            } else {
              this.form.skuList.splice(0, 0, {
                'specOneName': specOneName,
                'specTwoName': '',
                'stock': '',
                'price': '',
                'sku': ''
              })
            }
          })
        }
      },

      prdClassChange (value) {
        this.form.prdClassArray = value
      },
      prdImgCoverChange ({ fileList }) {
        this.prdImgCoverFileList = fileList
      },
      prdImgChange ({ fileList }) {
        this.prdImgFileList = fileList
      },
      handleSubmit () {
        this.form.prdClass = this.form.prdClassArray.join('/')
        if (this.prdImgCoverFileList && this.prdImgCoverFileList[0] &&
          this.prdImgCoverFileList[0]['response'] && this.prdImgCoverFileList[0]['response']['rspData']) {
          this.form.prdImgCover = this.prdImgCoverFileList[0]['response']['rspData']['fileId']
        }
        this.prdImgFileList.forEach((item, index) => {
          const field = (index <= 9 ? 'prdImg0' : 'prdImg') + (index + 1)
          if (item && item['response'] && item['response']['rspData']) {
            this.form[field] = item['response']['rspData']['fileId']
          }
        })
        addPrd(this.form).then(rsp => {
          notification.success({
            message: '成功',
            description: '商品新增成功'
          })
          this.$router.push({ path: '/product/manageProduct' })
        })
      }
    }
  }
</script>

<style scoped>

</style>
